---
title: Collapse
description: The collapse transition can be used to animate an element in and out of view vertically by collapsing the content like an accordian.
docType: Demo
docGroup: Components
group: Transition
hooks: [useCollapseTransition]
alias: [Accordian]
components: [Collapse]
---

# Collapse

The collapse transition can be used to animate an element in and out of view
vertically line an accordian by using the `Collapse` component or
`useCollapseTransition` hook. This is used behind the scenes in the [Expansion
Panel](/components/expansion-panel) and [Tree](/components/tree) components,
but can be used to implement the
[disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).

## Simple Collapse Example

The `Collapse` component can be used to inject styles in a child component that
will animate the height when the `collapsed` prop is changed.

> !Warn! The child of a `Collapse` **must** be a component that accepts a `ref`,
> `style`, and `className` to work correctly. All components within `react-md`
> and native elements support this out of the box, but custom components might
> require `React.forwardRef` and passing the `style` and `className` props
> forward.

```demo source="./SimpleCollapseExample.tsx"

```

### Simple useCollapseTransition Example

This is the same example as above, but using the hook version instead.

```demo source="./SimpleUseCollapseTransitionExample.tsx"

```

## Partial Collapse

The `Collapse` or `useCollapseTransition` can also be used to show partial
content instead of entirely hiding everything by configuring the `minHeight`
prop and optionally the `minPaddingTop`/`minPaddingBottom`.

```demo source="./PartialCollapseExample.tsx"

```

## Disable Transition

Like other transitions in `react-md`, the transition can be disabled by setting
the `timeout` to `0` or disable all transitions by setting the
`TRANSITION_CONFIG.disabled` to `true`.

```demo source="./DisableTransitionExample.tsx"

```
